<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@include file="/includes/taglibs.jsp"%>
<%@page import="com.feib.soeasy.util.UserUtil"%>

<script type="text/javascript">
<!-- 
	$(document).ready(function() {
	    $( "#queryNothingBlockDiv" ).dialog( "destroy" );
	    $( "#queryNothingBlockDiv" ).dialog({  title:'<%=UserUtil.getCurrentMenuItemName() %>查詢' ,width: 300, resizable: false, modal: true
	    	, buttons : {
			Ok : function() {
				$(this).dialog("close");
			}
		}  });
	});
	
	$("[id^='doModifyBtn']").click(function() {
	    doModifydAction();
	});
	
	$("#checkAll").click(function() {
	    doCheckAll();
	});
	
	$("#unCheckAll").click(function() {
	    undoCheckAll();
	});   
	
   $("[id^='menuItem_']").click(function() {
        var menuItemPk = this.id.substring(9);
        var checked = this.checked;
        $('#confirmHiddenFrom input:checkbox.chk').each(function(){              
            if (menuItemPk == this.id.substring(15))
            {
                if (checked) 
                    $(this).attr("checked", true);
                else
                    $(this).attr("checked", false);  
            }	          
         });        
    });
   
   $("[id^='parentMenuItem_']").click(function() {
	   var parentMenuItemPk = this.id.substring(15);
	   var checked = this.checked;
	   $('#confirmHiddenFrom input:checkbox.chk').each(function(){
           if (parentMenuItemPk == this.id.substring(9))
           {
        	   if (checked) $(this).attr("checked", true);
           }
	   });   
   });
   
   $("[id^='doAddUser']").click(function() {
	   $('#usersPk option:selected').each( function() {
		   $('#roleUsersPk').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
		   $(this).remove();
	   });
   });
   
   $("[id^='doRemoveUser']").click(function() {
       $('#roleUsersPk option:selected').each( function() {
           $('#usersPk').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
           $(this).remove();
       });
   });   
//-->
</script>

<c:choose>
    <c:when test="${null != actionBean.menuItems && null != actionBean.role}">
        <stripes:form name="confirmHiddenFrom" id="confirmHiddenFrom" beanclass="com.feib.soeasy.action.Soez9002ActionBean" 
            method="post" onsubmit="javascript: return false;">    
	        <table id="queryForm">
	        	<tr>
                    <th>角色代碼<span id="mustKeyInStar">**</span></th>
                    <td>
                    	<c:out value="${actionBean.roleNo }"/>
                    </td>
                    <th>角色名稱<span id="mustKeyInStar">**</span></th>
                    <td>
	                    <stripes:text id="roleName" name="roleName" value="${actionBean.roleName }"/>
                    </td>                  
                </tr>
                <tr>
                    <th>備註</th>
                    <td colspan="3">
                        <stripes:text id="roleMemo" name="roleMemo" value="${actionBean.roleMemo }"/>
                    </td>                   
                </tr>
                
	            
	        </table>            
            
            
            <c:forEach items="${actionBean.menuItems}" var="viewObj" varStatus="rowstat">
            	<c:if test="${null == viewObj.parentMenuItem || empty viewObj.parentMenuItem}">
            	<ul>
            		<input name="checkMenuItem[${rowstat.index}].menuItemPk" type="checkbox" id="menuItem_${viewObj.menuItemPk}" value="<c:out value='${viewObj.menuItemPk}'/>" <c:if test="${viewObj.checked }">checked="checked"</c:if> class="chk" />
            		<c:out value="${viewObj.actionName}"/>
            		<li>
            			<ul>
	            			<c:forEach items="${actionBean.menuItems}" var="subViewObj" varStatus="subRowstat">
    	        				<c:if test="${null != subViewObj.parentMenuItem && not empty subViewObj.parentMenuItem && viewObj.menuItemPk eq subViewObj.parentMenuItem.menuItemPk}">
        	    				<li>
            						<input name="checkSubMenuItem[${subRowstat.index}].menuItemPk" type="checkbox" id="parentMenuItem_${subViewObj.parentMenuItem.menuItemPk}" value="<c:out value='${subViewObj.menuItemPk}'/>" <c:if test="${subViewObj.checked }">checked="checked"</c:if> class="chk"/>
            						<c:out value="${subViewObj.actionName}"/>
            					</li>
            					</c:if>
            				</c:forEach>
            			</ul>
            		</li>
            	</ul>
            	</c:if>
            </c:forEach>
            
            <table id="addUserTable">
            	<tr>
            		<td colspan="3" id="paginationBar">
						<input type="button" id="checkAll" name="checkAll" value="全選">
						<input type="button" id="unCheckAll" name="unCheckAll" value="全不選">
            		</td>
            	</tr>
            	<tr>
            		<td colspan="3" >
						&nbsp;
            		</td>
            	</tr>
            	<tr>
            		<td>
			            <stripes:select id="usersPk" name="usersPk" multiple="multiple" size="10" >
			            	<stripes:options-collection collection="${actionBean.userOptions }" label="label" value="value"/>
			            </stripes:select>
			        </td>
            		<td>
            			<input type="button" id="doAddUser" name="doAddUser" value="加入>>" /><br/><br />
            			<input type="button" id="doRemoveUser" name="doRemoveUser" value="<<刪除" />
            		</td>
            		<td>
            			<stripes:select id="roleUsersPk" name="roleUsersPk" multiple="multiple" size="10">
            				<stripes:options-collection collection="${actionBean.roleUserOptions }" label="label" value="value"/>
            			</stripes:select>
            		</td>
            	</tr>
            	<tr>
            		<td colspan="3" id="paginationBar">
            			<input type="button" id="doModifyBtn" name="doModifyBtn" value="確認">
            		</td>
            	</tr>
            </table>
            <stripes:hidden id="hidden.roleUsersPk" name="roleUsersPk"/>
            <stripes:hidden id="hidden.rolePk1" name="rolePk" value="${role.rolePk }"/>
            <input type="hidden" id="method3" name="doAjaxModifyRoleAction"/>          
        </stripes:form>        
    </c:when>    
    <c:otherwise>
        <div id="queryNothingBlockDiv" style="display: none;">
            查無資料
        </div>      
    </c:otherwise>
</c:choose>       